<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->
    <title>RGraph: Javascript charts library - Miscellaneous</title>
    
    <meta name="keywords" content="rgraph html5 canvas misc docs" />
    <meta name="description" content="RGraph: Javascript charts library - Miscellaneous documentation" />
    
    <meta property="og:title" content="RGraph: Javascript charts library" />
    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
    <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>

    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    <link rel="icon" type="image/png" href="/favicon.png">
    
    <!-- Place this tag in your head or just before your close body tag -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    
    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->

    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-54706-2']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

</head>
<body>

    
    <!-- Social networking buttons -->
        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 140px; height: 20px">
            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a>
            <a href="http://www.twitter.com/_RGraph" target="_blank" title="Follow _RGraph on Twitter"><img src="../images/twitter.png" alt="Follow _RGraph on Twitter"/></a>
            <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&amp;href=http%3A%2F%2Fwww.rgraph.net&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
        </div>
        
        <script>
            // Opera fix
            if (navigator.userAgent.indexOf('Opera') == -1) {
              document.getElementById("social_icons").style.position = 'fixed';
            }
        </script>
        
        <div id="google_plusone">
            <!-- Place this tag where you want the +1 button to render -->
            <g:plusone href="http://www.rgraph.net"></g:plusone>
        </div>
    <!-- Social networking buttons -->

    <div id="breadcrumb">
        <a href="../index.html">RGraph: Javascript charts library</a>
        >
        <a href="index.html">Documentation</a>
        >
        Miscellaneous documentation
    </div>

    <h1>RGraph: <span>Javascript charts library</span> - Miscellaneous documentation</h1>

    <script>
        if (RGraph.isIE8()) {
            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
        }
    </script>
    
    <ul>
        <li><a href="#fallback.content">Canvas fallback content and visually impaired users</a></li>
        <li><a href="#limits">Upper and lower limits for horizontal bars</a></li>
        <li><a href="#canvas.width.height">Setting the canvas width and height</a></li>
        <li><a href="#canvas.coordinates">The canvas coordinate system</a></li>
        <li><a href="#older.browsers">RGraph and older browsers</a></li>
        <li><a href="#msie">RGraph and Microsoft Internet Explorer</a></li>
        <li><a href="#debugging">Debugging tips</a></li>
        <li><a href="#inspecting">Inspecting an RGraph chart</a></li>
        <li><a href="#context.menus">Double click context menus</a></li>
        <li><a href="#event.handlers">Adding your own event handlers</a></li>
        <li><a href="#crlf">Carriage returns and newlines in labels</a></li>
        <li><a href="#character.set">Character set issues</a></li>
        <li><a href="#rgraph.identify">How to identify an RGraph object</a></li>
        <li><a href="#static.y.axis">Static Y axis</a></li>
        <li><a href="#reducing.white.space">Reducing white space</a></li>
        <li><a href="#in.graph">In-graph labels</a></li>
        <li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li>
        <li><a href="#dom2.events">DOM2 Event handlers</a></li>
        <li><a href="#data.types">Data types</a></li>
        <li><a href="#create.your.own">Creating your own chart type</a></li>
        <li><a href="#world.map">World map</a></li>
        <li><a href="#text">Adding text to your charts</a></li>
        <li><a href="#known.issues">Known issues</a></li>
    </ul>

    <a name="fallback.content"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Canvas fallback content and visually impaired users</h4>

    <p>
        When using the canvas element you should be aware of the accessibility of your charts, for example where vision limited users are
        concerned. Screen readers, for example, may not be able to convert a chart into something that is reasonable, so you should
        consider
        doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example
        would be to put a table of data inside the canvas tag that the chart on the canvas represents. Doing this goes a long way
        towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas
        zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the chart.
    </p>

    <a name="limits"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Upper and lower limits for horizontal bars</h4>

        <p>
            If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower
            limits of the chart, whatever they may be, you can specify null for the value determining how far they extend. For cases where
            the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the
            bottom, you can simply specify an arbitrary length (eg -999999). Eg:
        </p>
        
        <pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre>
    
    <a name="canvas.width.height"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Setting the canvas width and height</h4>
    
        <p>
            To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas
            will be scaled, and not enlarged, to fit the new width/height. Eg:
        </p>
        
        <pre class="code">&lt;canvas id="myCanvas" width="200" height="100"&gt;[No canvas support]&lt;canvas&gt;</pre>
        
        <p>
            <b>Note:</b>
            When you resize the canvas using CSS, not only will it be scaled (not enlarged), but it will also NOT be cleared. You can
            see this effect on the <a href="animation.html">animation page</a> with the jQuery animation example.
        </p>
    
    <a name="canvas.coordinates"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>The canvas coordinate system</h4>
        <p>
            The canvas coordinate system starts in the top left of the canvas (at [0,0] - the X value increasing as you go right
            and the Y value as you go down), much like the CSS coordinates for the entire page. The
            gutter goes around the canvas (ie top/bottom/left/right - where the labels and titles are placed), and the actual chart
            sits in the middle.
        </p>

    <a name="older.browsers"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>RGraph and older browsers</h4>
    
        <p>
            Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text
            or shadow APIs these will naturally be unavailable. The charts will still be drawn, though without shadows or text.
        </p>

    <a name="msie"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>RGraph and Microsoft Internet Explorer</h4>

        <p>
            You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of &lt;canvas&gt; support to MSIE).
            Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native &lt;canvas&gt;
            support.
        </p>

    <a name="debugging"></a>
    <br />&nbsp;<br />&nbsp;<br />
    
    <h4>Debugging tips</h4>

        <p>
            If you're having a hard time debugging your chart, try these:
        </p>
        
        <ul>
            <li>Ensure you have only one chart on the page</li>
            <li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li>
            <li>
                Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> for Firefox or the
                Webkit developer tools for Google Chrome (CTRL_SHIFT+J) and Safari (CTRL+ALT+C). There's a
                video about using the Chrome developer tools
                <a href="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be" target="_blank">here</a>. These are very useful
                tools that make development much easier.
            </li>
            <li>Reduce the page to the bare minimum.</li>
            <li>Start with a very basic chart and build it up slowly.</li>
        </ul>



    <a name="inspecting"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Inspecting an RGraph chart</h4>
    
    <p>
        To help when debugging your RGraph charts and canvas elements, you can use you browsers built in debugging tools.
        An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot
        of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these
        tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via
        the <i>__object__</i> property.
    </p>


    <a name="context.menus"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Double click context menus</h4>

    <p>
        Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button),
        not the right, in order to make it more reliable.
    </p>


    <a name="event.handlers"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Adding your own event handlers</h4>
    
    <p>
        Because each RGraph object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>),
        you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could
        do this:
    </p>
        
    <pre class="code">
&lt;script&gt;
    var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
    myBar.Draw();

    myBar.canvas.onclick = function ()
    {
    }
&lt;/script&gt;
</pre>
    <p>
        But what if, for example, you're using an RGraph feature which
        uses the event handler that you need? In this case you can use the standard DOM2 method <i>addEventListener()</i>. This will add
        your new event handler without replacing any existing one (ie the one installed by RGraph). For example:
    </p>

    <pre class="code">
&lt;script&gt;
    var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
    myBar.Draw();

    function myFunc ()
    {
    }

    myBar.canvas.addEventListener('click', myFunc, false)
&lt;/script&gt;
</pre>


    <a name="crlf"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Carriage returns and newlines in labels</h4>
    
    <p>
        You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines.
        Like so:
    </p>
    
    <pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre>


    <a name="character.set"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Character set issues</h4>
    
    <p>
        If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct
        character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the
        name suggests, sends a HTTP header):
    </p>
    
    <pre class="code">&lt;?php
    header("Content-Type: text/html; charset=ISO-8859-1");
?&gt;</pre>

    <p>
        If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives,
        eg <i>AddDefaultCharset</i>.
    </p>
    
    <a name="rgraph.identify"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>How to identify an RGraph object</h4>
    
    <p>
        Because identity can sometimes be a tricky affair, there are a few RGraph properties that you can use to check whether an object
        is an RGraph object:
    </p>
    
    <ul>
        <li><i>obj.isRGraph</i> - This is a boolean that you can use to clearly identify an RGraph object.</li>
        <li><i>obj.type</i> - This identifies the type of an RGraph object. It is a string which contains a one word description of the objects chart type, eg bar/line/pie.</li>
    </ul>


    <!------------------------------------------------------------------------------------------------------------->






    <a name="static.y.axis"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Static Y axis</h4>

    <!--
        The HTML and script necessary for a chart with a static Y axis. The libraries are included at the top of the page
        in the <HEAD>
    -->
    <div style="position: relative; float: right; margin-right: 10px">
        <!-- The width here is set further down the page in script -->
        <canvas id="axes" width="0" height="170" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
        <div style="width: 600px; overflow: auto">
            <canvas id="cvs" width="1000" height="200"></canvas>
        </div>
    </div>

    <script>
        ShowGraphOne = function ()
        {
            /**
            * This is the script that draws the chart
            */
            line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
            line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page
            line.Set('chart.gutter.top', 25);
            line.Set('chart.gutter.bottom', 35);
            line.Set('chart.gutter.left', 50);
            line.Set('chart.hmargin', 5);
            line.Set('chart.linewidth', 3);
            line.Set('chart.shadow', true);
            line.Set('chart.shadow.offsetx', 0);
            line.Set('chart.shadow.offsety', 0);
            line.Set('chart.shadow.blur', 15);
            line.Set('chart.shadow.color', 'red');
            line.Set('chart.text.angle', 15);
            line.Set('chart.tooltips', [
                                        'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
                                        'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
                                       ]);
            line.Set('chart.labels', [
                                      'Jan `09','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
                                      'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
                                     ]);
            line.Draw();
    
    
    
            /**
            * And this is the script that draws the left axis, on the other canvas (that doesn't move)
            */
            ca = document.getElementById("axes")
            co = ca.getContext('2d');


            /**
            * This sets the smaller canvas to cover the whole of the charts left gutter
            */
            ca.width = line.Get('chart.gutter.left') + 1;


            RGraph.Clear(ca, 'white');


            /**
            * This draws the static axis
            */

            co.beginPath();
                co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
                co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));

                // Draw the tickmarks on the axis
                var numTicks = 10;
                for (var i=0; i<=numTicks; ++i) {
                    co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
                    co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
                }

            co.stroke();



            /**
            * This draws the labels for the static axis
            */
            co.beginPath();
                var color = 'black';
                var size = 10;

                for (var i=0; i<5; ++i) {
                    co.fillStyle = color;
                    co.textAlign = 'right';
                    co.textBaseline = 'middle';
                    var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');

                    RGraph.Text(co, 'Verdana', size, line.Get('chart.gutter.left') - 4, line.Get('chart.gutter.top') + (h * (i/5)), line.max - (line.max * (i/5)));
                }
                
                // Draw zero
                RGraph.Text(co,
                            'Verdana',
                            size,
                            line.Get('chart.gutter.left') - 4,
                            165,
                            '0');
            co.fill();
        }
    </script>
    
    A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the RGraph libraries itself, it can be
    achieved with a little HTML, like the chart shown. The HTML and the script to achieve this is shown below.
    It involves placing an extra canvas above the chart with the Y axis drawn on it. This canvas doesn't
    move when the main canvas scrolls left and right.
    
    <p />
    
    <b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties and they have to be simulated,
    scrolling in conjunction with tooltips in this case and this browser doesn't work.

    <pre class="code">
&lt;div style="position: relative; float: right; margin-right: 10px; margin-top: 10px"&gt;
    &lt;!-- The width here is set further down the page in script --&gt;
    &lt;canvas id="axes" width="0" height="200" style="position: absolute; top: 0; left: 0; z-index: 100"&gt;&lt;/canvas&gt;
    &lt;div style="width: 600px; overflow: auto"&gt;
        &lt;canvas id="cvs" width="1000" height="200"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    window.onload = function ()
    {
        /**
        * This is the script that draws the chart
        */
        line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
        line.Set('chart.noaxes', true); // We draw the Y axis ourselves
        line.Set('chart.gutter.top', 25);
        line.Set('chart.gutter.bottom', 35);
        line.Set('chart.gutter.left', 50);
        line.Set('chart.hmargin', 5);
        line.Set('chart.linewidth', 3);
        line.Set('chart.shadow', true);
        line.Set('chart.shadow.offsetx', 0);
        line.Set('chart.shadow.offsety', 0);
        line.Set('chart.shadow.blur', 15);
        line.Set('chart.shadow.color', 'red');
        line.Set('chart.text.angle', 15);
        line.Set('chart.tooltips', [
                                    'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
                                    'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
                                   ]);
        line.Set('chart.labels', [
                                  '','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
                                  'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
                                 ]);
        line.Draw();



        /**
        * And this is the script that draws the left axis, on the other canvas (that doesn't move)
        */
        ca = document.getElementById("axes")
        co = ca.getContext('2d');


        /**
        * This sets the smaller canvas to cover the whole of the charts left gutter
        */
        ca.width = line.Get('chart.gutter.left') + 1;


        RGraph.Clear(ca, 'white');


        /**
        * This draws the static axis
        */
        co.beginPath();
            co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
            co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));

            // Draw the tickmarks on the axis
            var numTicks = 10;
            for (var i=0; i<=numTicks; ++i) {
                co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
                co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
            }

        co.stroke();



        /**
        * This draws the labels for the static axis
        */
        co.beginPath();
            var color = 'black';
            var size = 10;

            for (var i=0; i<5; ++i) {
                co.fillStyle = color;
                co.textAlign = 'right';
                co.textBaseline = 'middle';
                var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');

                RGraph.Text(co,
                            'Verdana',
                            size,
                            line.Get('chart.gutter.left') - 4,
                            line.Get('chart.gutter.top') + (h * (i/5)),
                            line.max - (line.max * (i/5)));
            }
        co.fill();
    }
&lt;/script&gt;
</pre>
    <!------------------------------------------------------------------------------------------------------------->


    <br clear="all" />
    <br clear="all" />


    <!-- This chart is an example of how you can eliminate the gutter white space by translating before you draw the chart. -->
    
    <a name="reducing.white.space"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Reducing white space</h4>

    <canvas id="myc" width="600" height="250" style="float: right; border: dashed  1px gray; margin-right: 10px"></canvas>

    <script>
        ShowGraphTwo = function ()
        {            
        
            var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77];
            var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240]
        
            var line1 = new RGraph.Line('myc', arg1 , arg2); 
            line1.Set('chart.colors', ['red', 'silver']); 
            line1.Set('chart.background.barcolor1', 'white'); 
            line1.Set('chart.background.barcolor2', 'white'); 
            line1.Set('chart.labels', ['Jan 2000',
                                       'Feb 2001',
                                       'Mar 2002',
                                       'Apr 2003',
                                       'May 2004',
                                       'Jun 2005',
                                       'Jul 2006',
                                       'Aug 2007',
                                       'Sep 2008',
                                       'Oct 2009'])
            line1.Set('chart.filled', true); 
            line1.Set('chart.fillstyle', ['#fcc', '#cfc']); 
            line1.Set('chart.gutter.top', 5);
            line1.Set('chart.gutter.bottom', 55);
            line1.Set('chart.gutter.left', 55);
            line1.Set('chart.gutter.right', 35);
            line1.Set('chart.background.grid', true); 
            line1.Set('chart.ymax', 365) 
            line1.Set('chart.yaxispos', 'right'); 
            line1.Set('chart.title.xaxis', 'Month'); 
            line1.Set('chart.title.yaxis', 'Temperature');
            line1.Set('chart.title.xaxis.pos', -0.3);
            line1.Set('chart.title.yaxis.pos', 0.5);
            line1.Set('chart.text.angle', 30);
            line1.Set('chart.tooltips', [
                                         'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009',
                                         'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009'
                                        ]);
            line1.Draw();
        }
        
        window.onload = function ()
        {
            ShowGraphOne();
            ShowGraphTwo();
        }
    </script>

    <p>
        New in June 2011 is the ability to set the gutters independently. This removes the necessity to translate
        and adjust the coordinates to get more space and is far more straight-forward. The new properties are:
        
        <ul>
            <li>chart.gutter.left</li>
            <li>chart.gutter.right</li>
            <li>chart.gutter.top</li>
            <li>chart.gutter.bottom</li>
        </ul>
        
        You can read more about this change <a href="gutters.html"><b>here</b></a>.
    </p>


    <br clear="all" />


    <a name="in.graph"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>In-graph labels</h4>
        
        <p>
            As well as an array of strings, like this:
        </p>
        
        <pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre>
        
        <p>
            The string can also be an array, consisting of color and placement information, like this:
        </p>
        
        <pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre>
        
        
        <p>
            You can read more information about this <a href="ingraph.html">here</a>.
        </p>

    <a name="shorthand.ingraph.labels"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Shorthand for in-graph labels</h4>
            <p>
                Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy,
                you can instead  specify an integer that specifies how many elements to skip. Like this:
            </p>
            
            <pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre>
    
        <br clear="all" />
        <br clear="all" />

    <a name="dom2.events"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>DOM2 Event handlers</h4>
            <p>
                All the charts have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to
                be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the charts will still be
                drawn, albeit without tooltips.
            </p>
    
    
    
        <br clear="all" />




    <a name="data.types"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Data types</h4>
        <p>
            If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this
            when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests.
        </p>




    <a name="create.your.own"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Creating your own chart type</h4>
        <p>
            If you wish to create your own chart type, there is a skeleton file
            <a href="../libraries/RGraph.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point.
            This file contains the bare bones of an RGraph object, such as the .Get() and .Set() methods, as well as examples
            of common properties.
        </p>


    <a name="world.map"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>World map</h4>
        <p>
            There is no function in RGraph to do mapping, either of the World or a smaller region. If this is what you want then you
            may be interested in this HTML5 canvas based mapping system:
            <a href="http://joncom.be/code/excanvas-world-map/" target="_blank">http://joncom.be/code/excanvas-world-map/</a>
        </p>


    <a name="text"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Adding text to your charts</h4>
        <p>
            You can add arbitrary text to your charts by using the RGraph API. For example you could use this code after the call to .Draw():
        </p>
        
        <pre class="code">
function DrawSubTitle (obj)
{
    var context = obj.context;
    
    context.beginPath();
        context.fillStyle = 'gray';
        RGraph.Text(context,
                    'Verdana',
                    7,
                    obj.canvas.width / 2,
                    obj.Get('chart.gutter.top') - 6,
                    'The subtitle',
                    'center',
                    'center');
    context.fill();
}

DrawSubTitle(myLine);
</pre>

    <a name="known.issues"></a>
    <br />&nbsp;<br />&nbsp;<br />
    <h4>Known issues</h4>
    
    <p>
        There's a few known issues documented <a href="issues.html">here</a>
    </p>


    <p />
</body>
</html>